<template>
  <div class="rb-size-select">
    <rb-tag-list
      :list="list"
      :max="99"
      :multiple="true"
      v-model="myValue"
      @onSelect="emit('onSelect', $event)"
    ></rb-tag-list>
  </div>
</template>

<script setup>
const emit = defineEmits(["update:modelValue", "onSelect"]);
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  modelValue: {
    type: Array,
    default: [],
  },
});
const myValue = ref([]);
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    myValue.value = newVal;
  },
  {
    immediate: true,
  }
);
watch(
  () => myValue.value,
  (newVal) => {
    console.log("newVal", newVal);
    emit("update:modelValue", newVal);
  },
  {
    deep: true,
  }
);
</script>

<style lang='scss' scoped>
.rb-size-select {
  .rb-tag-list {
    gap: 14px;
  }
}
</style>